<template>
  <div class="timeBar"
       :style="{height:property.height + 'px', width:property.width + 'px',top:property.top + 'px', left:property.left + 'px'}">
    <div class="mainPannel">
      <RadioGroup v-model="params.timeTip" type="button" size="small" class="timeRadio" @on-change="timeRadioChange">
        <Radio label="当月"></Radio>
        <!--<Radio label="季"></Radio>-->
        <!--<Radio label="年"></Radio>-->
      </RadioGroup>
      <DatePicker class="timeSelect" type="month" placeholder="选择月份"
                  v-model="params.timeVal" style="width: 230px"
                  @on-change="timeChange"></DatePicker>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'topTimeSelect',
    props: {
      property: {},
      params: {}
    },
    data () {
      return {}
    },
    methods: {
      timeRadioChange (e) {
        this.params.timeTip = e
        if (e === '当月') {
          this.params.timeVal = moment().format('YYYY-MM')
          // this.params.timeVal = [moment().subtract(+1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }
        // if (e === '季') {
        //   this.params.timeVal = [moment().subtract(+1, 'quarters').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        // }
        // if (e === '年') {
        //   this.params.timeVal = [moment().subtract(+1, 'years').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        // }
        this.$emit('timeChanged')
      },
      timeChange (e) {
        this.params.timeVal = moment(e).format('YYYY-MM')
        this.params.timeTip = '无'
        this.$emit('timeChanged')
      }
    },
    mounted () {
    }
  }
</script>

<style scoped>
  .timeBar {
    position: absolute;
    float: left;
    text-align: center;
  }

  .mainPannel .timeRadio .ivu-radio-group-item {
    border-radius: 0;
    background: #D8D8D8;
    border: 0;
    color: #333333;
    font-size: 12px;
    box-shadow: none;
    height: 32px;
    width: 48px;
    line-height: 32px;
  }

  .mainPannel .timeRadio .ivu-radio-wrapper-checked {
    background: #787878;
    color: #FFFFFF;
  }

  .mainPannel .timeRadio .ivu-radio-group-item:before {
    display: none;
  }

  .mainPannel .timeRadio .ivu-radio-group-item:after {
    display: none;
  }

  .mainPannel .timeRadio .ivu-radio-wrapper-checked:before {
    display: none;
  }

  .mainPannel .timeRadio .ivu-radio-wrapper-checked:after {
    display: none;
  }
</style>
<style>
  .mainPannel .timeSelect.ivu-date-picker .ivu-input {
    border-radius: 0;
    background: #D8D8D8;
    font-size: 12px;
    color: #333333;
    box-shadow: none;
    border: 0;
  }

  .mainPannel .timeSelect.ivu-date-picker input::-webkit-input-placeholder {
    color: #333333;
  }

  .mainPannel .timeSelect.ivu-date-picker input:-moz-placeholder {
    color: #333333;
  }

  .mainPannel .timeSelect.ivu-date-picker input::-moz-placeholder {
    color: #333333;
  }

  .mainPannel .timeSelect.ivu-date-picker input:-ms-input-placeholder {
    color: #333333;
  }
</style>
